<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<title>自学网首页练习</title>
		<style type="text/css">
			/*头部样式开始*/
			#header{width: 1100px;height: 80px;margin: 0px 90px;position: relative;}
			.logo img{width: 250px;height: 60px;margin: 10px 0px;}
			.serch{width: 250px;height: 80px;position: absolute;top: 0px;left: 425px;padding-top: 20px;}
			.serch input{width: 250px;height: 40px;border-radius: 20px;border: 1px solid cornflowerblue;padding: 5px;}
			.serch p{width: 80px;height: 38px;background: greenyellow;color: white;border-radius: 20px;text-align: center;line-height:38px;font-size: 20px;position: absolute;top: 21px;left: 169px;}
			.login{width: 250px;height: 80px;position: absolute;top: 0px;left: 850px;line-height: 60px;padding: 10px;}
			.login p{width: 60px;height: 60px;border-radius: 40px;border: 1px solid #ccc;position: absolute;bottom: 10px;right: 0px;}
			.login span{margin: 15px;}
			/*头部样式结束*/
			/*头部导航样式开始*/
			.header_nav{width: 100%;height: 50px;background: #363636;}
			.header_nav ul{width: 1100px;height: 50px;margin-left: 90px;display: flex;justify-content: space-between;align-items: center;}
			.header_nav ul a{font-size: 16px;color: white;}
			.header_nav ul .nav_last{font-size: 20px}
			.header_nav ul a:hover{font-size: 18px;color: blue;}
			/*头部导航样式结束*/
			/*轮播图样式开始*/
			.lunbotu_bgd{width: 100%;height: 330px;background: #143324;padding: 0px 90px;animation: beijingse 15s linear infinite;}
			.lunbotu_show{width: 1100px;height: 330px;overflow: hidden;position: relative;}
			.lunbotu_show ul{width: 5500px;height: 330px;position: absolute;top: 0;left: 0; animation: lunbo 15s linear infinite;}
			.lunbotu_bgd:hover,.lunbotu_bgd:hover ul{animation-play-state: paused;}
			.lunbotu_show ul li{float: left;}
			.lunbotu_show ul li img{width: 1100px;height: 330px;}
			@keyframes lunbo{
				0%{left: 0px;}
				20%{left:0px;}
				25%{left:-1100px;}
				45%{left:-1100px;}
				50%{left:-2200px;}
				70%{left:-2200px;}
				75%{left:-3300px;}
				95%{left:-3300px;}
				100%{left:-4400px;}
			}
			@keyframes beijingse{
				0%{background: #143324;}
				20%{background: #143324;}
				25%{background: #0150F3;}
				45%{background: #0150F3;}
				50%{background: #5F121A;}
				70%{background: #5F121A;}
				75%{background: #1B1839;}
				95%{background: #1B1839;}
				100%{background: #143324;}
			}
			/*轮播图样式结束*/
			/*背景精灵样式开始*/
			.bjjl_box{width: 1100px;height: 150px;margin: 0px 90px;display: flex;justify-content: space-around;align-items: center;}
			.bjjl_box a{display: block; width: 200px;height: 110px;background-image: url(../img/zxwbj40.png);background-repeat: no-repeat; font-size: 25px;
			color: white;font-weight: 600;text-align: center;line-height: 110px;border-radius: 10px;box-shadow: 2px 2px 5px #CCCCCC;-webkit-filter: grayscale(20%);
			filter: brightness(0.8);}
			.bjjl_box a:hover{opacity: 0.7;cursor: pointer;}
			.bjjl_box #a1{background-position: 0 0;}
			.bjjl_box #a2{background-position: -220px 0;}
			.bjjl_box #a3{background-position: -440px 0;}
			.bjjl_box #a4{background-position: -660px 0;}
			.bjjl_box #a5{background-position: -880px 0;}
			/*背景精灵样式结束*/
			/*最新课程样式开始*/
			.newkecheng{width: 100%;height: 104px;text-align: center;font-size: 25px;position: relative;line-height: 104px;}
			.newkecheng .jianbian1{width: 130px;height: 4px;background: red;position: absolute;top:50px;left: 400px;background: linear-gradient(90deg,white,red);}
			.newkecheng .jianbian2{width: 130px;height: 4px;background: red;position: absolute;top:50px;left: 740px;background: linear-gradient(90deg,red,white);}
			.kecheng_box{width: 1100px;height: 500px;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center; margin: 0 90px;}
			.kecheng_box .kc:hover{opacity: 0.7;cursor:pointer}
			.kecheng_box .kc{width: 250px;height: 230px;border-radius: 10px;box-shadow: 2px 2px 3px #CCCCCC}
			.kecheng_box p{width: 250px;height: 30px;font-size: 15px;padding-left: 5px;}
			.kecheng_box img{width: 250px;height: 200px;}
			/*最新课程样式结束*/
			/*左侧边栏样式开始*/
			.aside_left_box{position: fixed;top: 140px;display: none;}
			.aside_left_box a{display: block; width: 60px;height: 60px;border: 1px solid #CCCCCC; border-radius: 50%;background: white;
			font-size: 15px;padding: 10px;margin: 16px;box-shadow: 1px 1px 5px #CCCCCC;}
			.aside_left_box a:hover{background: #00AEFF;color: white;cursor: pointer;}
			/*左侧边栏样式结束*/
			/*<!--右边侧栏样式开始-->*/
			body{position: relative;}
			.aside_regth{width: 80px;height: 320px;position: fixed;left: 1200px;top: 280px;display: none;}
			.aside_regth a{display: block; width: 50px;height: 50px;background-image: url(../img/aside.png);}
			.aside_regth .a1{background-position: 0 0;}
			.aside_regth .a2{background-position: 0 -50px;}
			.aside_regth .a3{background-position: 0 -100px;}
			.aside_regth .a4{background-position: 0 -150px;}
			#aside_rigth img{width: 150px;height: 200px;position: fixed;left: 1050px;top: 280px;display: none;}
			/*<!--右边侧栏样式结束-->*/
			/*课程分类样式开始*/
			.kefl_nav{width: 1100px;height: 40px;margin: 0 90px;border-bottom: 1px solid #CCCCCC;}
			.kefl_nav a{font-size: 16px;margin-left: 50px;}
			.kefl_nav p{display: inline;width: 60px;height: 40px;font-size: 20px;margin-left: 50px;background: #68B8F6;}
			.kcfl_tu_box{width: 1100px;height: 220px;margin: 0 90px;display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;}
			.kcfl_tu_box div{width: 200px;height: 200px;}
			.kcfl_tu_box img{width: 200px;height: 170px;border-radius: 10px;}
			.kcfl_tu_box p{width: 200px;height: 30px;font-size: 15px;margin-left: 5px;}
			.kcfl_tu_box .vid1{ width: 200px;height: 200px;padding-top: 20px;}
			.kcfl_tu_box .vid1 img{width: 180px;height: 150px;}
			.kcfl_tu_box div:hover{opacity: 0.7;cursor: pointer;}
			/*课程分类样式结束*/
			/*名师推荐样式开始*/
			.ms_box{width: 1100px;height: 300px;margin: 0 90px;display: flex;justify-content: space-between;align-items: center;margin-bottom: 100px;}
			.ms_touxiang{width: 250px;height: 330px;background: #E7E7E7;}
			.ms_touxiang img{width: 180px;height: 180px;border-radius: 50%;margin: 20px 35px;}
			.ms_touxiang p{font-size: 15px;text-indent: 2em;}
			.ms_touxiang h3{text-align: center;}
			/*名师推荐样式结束*/
			/*尾部样式开始*/
			.foot_box{width: 100%;height: 300px;background: #414141;}
			.foot_box img{width: 1100px;height: 300px;margin-left: 90px;}
			/*尾部样式结束*/
		</style>
	</head>
	<body>
		<!--头部结构开始-->
		<div id="header">
			<div class="logo">
				<img src="../img/login.png"/>
			</div>
			<div class="serch">
				<input id="header_serch_ipt" type="text" placeholder="课程太多?搜一搜" />
				<p>搜索</p>
			</div>
			<div class="login">
				<span class="banzu">帮组中心</span>
				<span class="denglu">登录</span>
				<p class="touxiang"></p>
			</div>
		</div>
		<!--头部结构结束-->
		<!--导航结构开始-->
		<div class="header_nav">
			<ul>
				<li><a href="#">电脑办公</a></li>
				<li><a href="#">平面设计</a></li>
				<li><a href="#">室内设计</a></li>
				<li><a href="#">室外设计</a></li>
				<li><a href="#">影视动画</a></li>
				<li><a href="#">机械设计</a></li>
				<li><a href="#">工业自动</a></li>
				<li><a href="#">程序设计</a></li>
				<li><a href="#">网页设计</a></li>
				<li><a href="#">会计课程</a></li>
				<li><a class="nav_last" href="#">首页</a></li>
				<li><a class="nav_last" href="#">商城</a></li>
			</ul>
		</div>
		<!--导航结构结束-->
		<!--轮播图结构开始-->
		<div class="lunbotu_bgd">
			<div class="lunbotu_show">
				<ul>
					<li><img src="../img/lunbotu01.jpg" alt="" /></li>
					<li><img src="../img/lunbotu02.jpg" alt="" /></li>
					<li><img src="../img/lunbotu03.jpg" alt="" /></li>
					<li><img src="../img/lunbotu04.jpg" alt="" /></li>
					<li><img src="../img/lunbotu01.jpg" alt="" /></li>
				</ul>
			</div>
		</div>
		<!--轮播图结构结束-->
		<!--精灵结构开始-->
		<div class="bjjl_box">
			<a id="a1">远程培训</a>
			<a id="a2">校园活动</li>
			<a id="a3"></a>
			<a id="a4"></a>
			<a id="a5"></a>
		</div>
		<!--精灵结构结束-->
		<!--最新课程开始-->
		<div class="newkecheng">
			<p class="jianbian1"></p>
			<p>最新课程</p>
			<p class="jianbian2"></p>
		</div>
		<div class="kecheng_box">
			<div class="kc">
				<img src="../img/kc1.jpg"/>
				<p>Flink框架入门实战教程</p>
			</div>
			<div class="kc">
				<img src="../img/kc2.jpg"/>
				<p>EPLAN Electric P8视频教程</p>
			</div>
			<div class="kc">
				<img src="../img/kc3.jpg"/>
				<p>纵横公路造价入门教程</p>
			</div>
			<div class="kc">
				<img src="../img/kc4.jpg"/>
				<p>Flink框架入门实战教程</p>
			</div>
			<div class="kc">
				<img src="../img/kc5.jpg"/>
				<p>纵横公路造价入门教程</p>
			</div>
			<div class="kc">
				<img src="../img/kc6.jpg"/>
				<p>EPLAN Electric P8视频教程</p>
			</div>
			<div class="kc">
				<img src="../img/kc7.jpg"/>
				<p>纵横公路造价入门教程</p>
			</div>
			<div class="kc">
				<img src="../img/kc8.jpg"/>
				<p>Flink框架入门实战教程</p>
			</div>
		</div>
		<!--最新课程结束-->
		<!--课程分类结构开始-->
		<div class="newkecheng">
			<p class="jianbian1"></p>
			<p>课程分类</p>
			<p class="jianbian2"></p>
		</div>
		<div class="kefl_nav">
			<a href="">WordExcel</a>
			<a href="">基础PPT</a>
			<a href="">WPSiebook</a>
			<a href="">PDF文档</a>
			<a href="">visio</a>
			<a href="">Excel</a>
			<a href="">五笔输入法</a>
			<a href="">Acrobat</a>
			<p>更多》</p>
		</div>
		<div class="kcfl_tu_box">
			<div class="vid1">
				<img src="../img/fl5.jpg"/>
			</div>
			<div>
				<img src="../img/fl1.jpg"/>
				<p>WPS2019视频教程</p>
			</div>
			<div>
				<img src="../img/fl2.jpg"/>
				<p>PS产品精修视频教程</p>
			</div>
			<div>
				<img src="../img/fl3.jpg"/>
				<p>2017视频教程</p>
			</div>
			<div>
				<img src="../img/fl4.jpg"/>
				<p>Sketch视频教程</p>
			</div>
		</div>
		
		<div class="kefl_nav">
			<a href="">WordExcel</a>
			<a href="">基础PPT</a>
			<a href="">WPSiebook</a>
			<a href="">PDF文档</a>
			<a href="">visio</a>
			<a href="">Excel</a>
			<a href="">五笔输入法</a>
			<a href="">Acrobat</a>
			<p>更多》</p>
		</div>
		<div class="kcfl_tu_box">
			<div class="vid1">
				<img src="../img/fl5.jpg"/>
			</div>
			<div>
				<img src="../img/fl1.jpg"/>
				<p>WPS2019视频教程</p>
			</div>
			<div>
				<img src="../img/fl2.jpg"/>
				<p>PS产品精修视频教程</p>
			</div>
			<div>
				<img src="../img/fl3.jpg"/>
				<p>2017视频教程</p>
			</div>
			<div>
				<img src="../img/fl4.jpg"/>
				<p>Sketch视频教程</p>
			</div>
		</div>
		
		<div class="kefl_nav">
			<a href="">WordExcel</a>
			<a href="">基础PPT</a>
			<a href="">WPSiebook</a>
			<a href="">PDF文档</a>
			<a href="">visio</a>
			<a href="">Excel</a>
			<a href="">五笔输入法</a>
			<a href="">Acrobat</a>
			<p>更多》</p>
		</div>
		<div class="kcfl_tu_box">
			<div class="vid1">
				<img src="../img/fl5.jpg"/>
			</div>
			<div>
				<img src="../img/fl1.jpg"/>
				<p>WPS2019视频教程</p>
			</div>
			<div>
				<img src="../img/fl2.jpg"/>
				<p>PS产品精修视频教程</p>
			</div>
			<div>
				<img src="../img/fl3.jpg"/>
				<p>2017视频教程</p>
			</div>
			<div>
				<img src="../img/fl4.jpg"/>
				<p>Sketch视频教程</p>
			</div>
		</div>
	
		<!--课程分类结构结束-->
		<!--右边侧栏开始-->
		<div id="aside_rigth" class="aside_regth">
			<img id="asimg" src="../img/weixinerweima.png"/>
			<a id="weixin" class="a1" href=""></a>
			<a class="a2" href=""></a>
			<a class="a3" href=""></a>
			<a class="a4" href=""></a>
		</div>
		<!--右边侧栏结束-->
		<!--左侧边栏结构开始-->
		<div id="aside_left" class="aside_left_box">
			<a href="">最 新课 程</a>
			<a href="">热 门推 荐</a>
			<a href="">课 程分 类</a>
			<a href="">热 门职 业</a>
			<a href="">名 师推 荐</a>
		</div>
		<!--左侧边栏结构结束-->
		<!--名师介绍结构开始-->
		<div class="newkecheng">
			<p class="jianbian1"></p>
			<p>名师介绍</p>
			<p class="jianbian2"></p>
		</div>
		<div class="ms_box">
			<div class="ms_touxiang">
				<img src="../img/laoshi1.jpg"/>
				<h3>朱向春 老师</h3>
				<br />
				<p>通过讲解实际案例，结合动画模拟软件的方式，来讲解ＰＬＣ程序的编写步骤，编...</p>
			</div>
			<div class="ms_touxiang">
				<img src="../img/laoshi2.jpg"/>
				<h3>刘雨泽 老师</h3>
				<br />
				<p>雨泽老师，2008年室内设计科班出身从事室内设计工作，2012年创办整装...</p>
			</div>
			<div class="ms_touxiang">
				<img src="../img/laoshi3.jpg"/>
				<h3>舒清 老师</h3>
				<br />
				<p>长期从事软件测试工作，为大家带来多套深受欢迎的课程！</p>
			</div>
			<div class="ms_touxiang">
				<img src="../img/laoshi4.jpg"/>
				<h3>索琰斌 老师</h3>
				<br />
				<p>2007年接触北京精雕，从事过模具设计，平面图绘制，三维造型，北京精雕编...</p>
			</div>
		</div>

		<!--名师介绍结构结束-->
		<div class="foot_box">
			<img src="../img/foot.png"/>
		</div>
		
	</body>

</html>
<script type="text/javascript">
	document.body.onscroll = function(){
		var t = document.documentElement.scrollTop
		if(t>=350){
			document.getElementById('aside_left').style.display = 'block';
			document.getElementById('aside_rigth').style.display = 'block';
		}else{
			document.getElementById('aside_left').style.display = 'none';
			document.getElementById('aside_rigth').style.display = 'none';
		}
	}
	document.getElementById('weixin').onmouseenter =function(){
		document.getElementById('asimg').style.display = 'block';
	};
	document.getElementById('weixin').onmouseleave =function(){
		document.getElementById('asimg').style.display = 'none';
	};
	window.onload = function(){
		var ipt =document.getElementById("header_serch_ipt");
		ipt.focus();
	}
</script>
